<script setup>
import { onMounted, ref } from "vue"
import DetailSection from "@/components/detail-section/detail-section.vue"

const props = defineProps({
  position: {
    type: Object,
    default: () => ({})
  }
})

// 获取百度地图的容器元素（ref属性为mapRef的元素）
const mapRef = ref()

// 元素挂载到页面后，才进行相应的操作
onMounted(() => {
  // 参数：挂载的容器
  const map = new BMapGL.Map(mapRef.value);          // 创建地图实例 
  // 参数：坐标经纬度
  const point = new BMapGL.Point(props.position.longitude, props.position.latitude);  // 创建点坐标 
  // 参数：地图的中央显示区域的坐标，缩放数值（数值越大，目标区域显示越大）
  map.centerAndZoom(point, 15);
  // 添加目标地点标记物
  const marker = new BMapGL.Marker(point);        // 创建标注   
  marker.addEventListener("click", function (event) {
    // 点击标记时，放大目标区域
    map.centerAndZoom(point, 20);
  });
  map.addOverlay(marker);                     // 将标注添加到地图中
})
</script>

<template>
  <div class="map">
    <detail-section title="位置周边" more-text="查看更多周边信息">
      <!-- 展示百度地图 -->
      <!-- 百度地图开发者平台：https://lbsyun.baidu.com/ -->
      <!-- 
        操作流程：
          1.进行百度地图开发者平台，使用百度账号登录
          2.点击《控制台》选项，申请成为开发者，然后再次进行《控制台》
          3.点击《应用管理》>《我的应用》，点击《创建应用》
          4.输入自定义应用名称，选择应用类型（在什么端使用），当前项目选择浏览器端
          5.在《Referer白名单》配置框中添加该项目的网址（一般为公司域名），只有白名单中的网址才能成功发起调用，输入 * 表示允许所有网址调用
          6.最后点击《提交》按钮，创建应用
            AK：App Key
          7.点击页面顶部的《开发文档》选项，然后点击 《Web开发》>《JavaScript API》
          8.点击《开发指南》>《Hello World》，根据步骤开发第一个实例
          9.根据《开发指南》进行配置即可
       -->
      <div class="baidu" ref="mapRef">百度地图</div>
    </detail-section>
  </div>
</template>

<style lang="less" scoped>
.baidu {
  height: 250px;
}
</style>